<template>
	<view>
		<view class="record">
			<image class="pro-img" :src="productInfo.imageArr[0] || '../../static/errorImage.jpg'" mode="aspectFill"></image>
			<view class="record-r">
				<view class="record-r-t">
					<view class="record-r-t-l">
						<view class="name">{{productInfo.name}}</view>
						<view class="xg" v-if="productInfo.restrictedPurchase>0">每单限购{{productInfo.restrictedPurchase}}份</view>
						<view class="xl">已售{{productInfo.sales}}件，剩余{{productInfo.stock}}件</view>
					</view>
					<view class="record-r-t-r">
						<text class="myicon myicon-fenxiang"></text>
						<button open-type="share" plain></button>
					</view>
				</view>
				<view class="record-r-b">
					<view class="price">¥{{usertype == 0 ?　productInfo.price:productInfo.agentPrice}}</view>
					<view class="time">距结束03:12:12</view>
				</view>
			</view>
		</view>
		<view class="list">
			<block v-for="(item,index) in list" :key="index">
				<view class="items" v-for="(items,indexs) in item" :key="indexs">
					<view class="items-top">
						<image :src="items.userImage" mode="aspectFill"></image>
						<text class="nickname">{{items.userName}}</text>
					</view>
					<view class="items-content">{{items.content}}</view>
					<view class="items-time">{{items.createdDate}}</view>
				</view>
			</block>
			<uni-load-more :status="isOver?'noMore':'loading'"></uni-load-more>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<uni-badge text="1" type="error" size="small"></uni-badge>
				<text class="yticon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator>

			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @tap="nowBuyClick" data-type="0">立即购买</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @tap="nowBuyClick" data-type="1">加入购物车</button>
			</view>
		</view>

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" v-if="specClass=='show'">
			<!-- 遮罩层 -->
			<view class="mask" @tap="specShowOrHide"></view>
			<view class="layer attr-content">
				<view class="a-t">
					<image :src="productInfo.imageArr[0]"></image>
					<view class="right">
						<text class="title ycyc">{{productInfo.name}}</text>
						<text class="price">¥{{usertype==0?productInfo.price:productInfo.agentPrice}}</text>
						<text class="stock">库存：{{productInfo.stock}}件</text>
					</view>
				</view>
				<view class="b-t">
					<text>数量</text>
					<uni-number-box @eventChange="buyNumberChange" min="1" :max="productInfo.stock || 1" :value="buyNumber"></uni-number-box>
				</view>
				<button class="btn" @tap.stop="toggleSpec">完成</button>
			</view>
		</view>

	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue';
	let pageSize = 20;
	let postIng = false;
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				buyNumber: 1, //购买数量
				specType: 0, //0-立即购买 1-加入购物车
				specClass: 'none', //数量弹窗
				productInfo: {}, //商品信息
				usertype: 0, //0普通用户 1代理
				productActivity: {}, //活动信息
				pageNo: 1,
				isOver: false,
				list: [], //评价列表
				goodsid: '',
			}
		},
		onLoad(options) {
			console.log('购买记录----onLoad----', options);
			if (options && options.id) {
				this.goodsid = options.id;
				this.getDetail(options.id);
				this.productCommentList(options.id);
			}
		},

		onReachBottom() {
			console.log('到底了-----');
			if (!postIng && !this.isOver) {
				this.pageNo++;
				this.productCommentList(this.goodsid);
			}
		},

		/**
		 * 分享
		 */
		onShareAppMessage() {
			let title = '';
			let path = '/pages/product/product?id=' + this.goodsid;
			let imageUrl = '';
			if (productInfo) {
				title = productInfo.name;
				imageUrl = productInfo.image.split(',')[0];
			}
			if (uni.getStorageSync('userInfo')) {
				path += '&shareUserCode=' + uni.getStorageSync('userInfo').id;
			}
			console.log('分享----',{
				title: title,
				path: path,
				imageUrl: imageUrl
			})
			return {
				title: title,
				path: path,
				imageUrl: imageUrl
			}
		},

		methods: {
			/*---------------------------------点击-------------------------------------------*/
			/**
			 * 点击-立即购买或加入购物车
			 */
			nowBuyClick: function(e) {
				if (this.productInfo && this.productInfo.id) {
					if (this.productInfo.status == 1) {
						this.specType = Number(e.currentTarget.dataset.type); //0-立即购买 1-加入购物车
						// 数量加减弹窗
						this.specClass = 'show';
					} else {
						this.$api.msg('商品已下架');
					}
				}
			},

			/**
			 * 数量弹窗完成点击
			 */
			toggleSpec: function() {
				let than = this;
				try {
					let aa = setTimeout(function() {
						clearTimeout(aa);
						if (than.buyNumber > 0) {
							let flg = true;
							let msg = '';
							if (!uni.getStorageSync('userInfo')) {
								flg = false;
								msg = '请先登录';
							} else if (than.productInfo.restrictedPurchase != 0 && than.buyNumber > than.productInfo.restrictedPurchase) {
								//限购
								flg = false;
								msg = '限购' + than.productInfo.restrictedPurchase;
							}
							if (flg) {
								if (than.specType == 0) {
									//立即购买
									uni.navigateTo({
										url: '/pages/order/createOrder'
									});
								} else {
									//加入购物车
									than.addCart();
								}
							} else {
								than.$api.msg(msg);
							}
						} else {
							than.$api.msg('数量不能为0');
						}
						this.specClass = 'hide';
					}, 100)
				} catch (e) {
					console.error(e)
				}
			},
			/*---------------------------------函数-------------------------------------------*/
			/**
			 * 获取商品详情信息
			 */
			getDetail: function(id) {
				let than = this;
				than.$api.myPost({
					url: 'productDetail',
					data: {
						productId: id
					},
					success(res) {
						if (res.status == 'success' && res.productInfo) {
							res.productInfo.imageArr = res.productInfo.image.split(',');
							than.productInfo = res.productInfo;
							if (res.productActivity) {
								than.productActivity = res.productActivity;
							}
						}
					}
				})
			},

			/**
			 *  获取商品评价列表
			 * @param {Object} id
			 */
			productCommentList: function(id) {
				let than = this;
				if (!postIng) {
					postIng = true;
					than.$api.myPost({
						url: 'productCommentList',
						data: {
							pageNo: than.pageNo,
							pageSize: pageSize,
							productId: id
						},
						success(res) {
							postIng = false;
							if (res.status == 'success' && res.orderCommentList) {
								if (res.orderCommentList.length == 0 || res.orderCommentList.length < pageSize) {
									than.isOver = true;
								}
								res.orderCommentList.forEach(o => {
									o.createdDate = than.$api.formatDate(o.createdDate, 'yyyy-mm-dd hh:mm:ss');
								});
								than.$set(than.list, than.pageNo - 1, res.orderCommentList);
							}
						}
					})
				}
			},
			/**
			 * 数量弹窗显示隐藏
			 */
			specShowOrHide: function() {
				this.specClass = this.specClass == 'hide' ? 'show' : 'hide';
			},
			/*------------------监听-----------------------------------------------------*/
			/**
			 * 购买数量监听
			 * @param {Object} e
			 */
			buyNumberChange: function(e) {
				this.buyNumber = e.number;
			},
		}
	}
</script>

<style lang="scss">
	/*
		自定义字体图标
	*/
	@font-face {
		font-family: myicon;
		font-weight: normal;
		font-style: normal;
		src: url('//at.alicdn.com/t/font_1325746_bc4gduicvlp.ttf') format('truetype');
		/* ,url('../../static/iconfont.ttf') format('truetype'); */
	}

	.myicon {
		font-family: "myicon" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.myicon-fenxiang:before {
		content: "\e620";
	}

	page {
		background-color: #F8F8F8;
	}

	.record {
		width: 100vw;
		background-color: #fff;
		float: left;
		border-bottom: 2rpx solid #F8F6FC;
		border-top: 2rpx solid #F8F6FC;

		.pro-img {
			margin: 30rpx;
			width: 22vw;
			height: 22vw;
			float: left;
			border-radius: 10rpx;
		}

		.record-r {
			width: calc(78vw - 90rpx);
			float: left;
			font-size: 24rpx;
		}

		.record-r-t {
			width: 100%;
			height: calc(22vw * 0.7);
			margin-top: 30rpx;
			float: left;
			margin-bottom: 10rpx;

			.record-r-t-l {
				width: calc(84% - 2rpx);
				height: 100%;
				border-right: 2rpx dashed #C0C4CC;
				float: left;
				padding-right: 20rpx;

				.name {
					color: #303133;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					word-break: break-all; //兼容字母
					width: 100%;
					margin-bottom: 10rpx;
				}

				.xg,
				.xl {
					color: #C0C4CC;
					font-size: 22rpx;
				}
			}

			.record-r-t-r {
				width: 15%;
				float: right;
				text-align: right;
				line-height: calc(22vw * 0.7);
				position: relative;

				text {
					color: #FA436A;
					font-weight: bold;
					font-size: 40rpx;
				}

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					border: none;
				}
			}
		}

		.record-r-b {
			width: 100%;
			float: left;

			view {
				width: 50%;
				float: left;
			}

			.price {
				color: #FA436A;
				font-size: 30rpx;
			}

			.time {
				color: #303133;
				font-size: 24rpx;
				text-align: right;
			}
		}
	}

	.list {
		width: calc(100vw - 40rpx);
		margin: 30rpx 20rpx;
		border-radius: 20rpx;
		float: left;
		margin-bottom: 160rpx;

		.items {
			width: 100%;
			padding: 0 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			float: left;

			.items-top {
				width: 100%;
				height: 110rpx;
				line-height: 110rpx;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 100rpx;
					margin: 22.5rpx 0;
					float: left;
					margin-right: 20rpx;
				}

				.nickname {
					max-width: calc(100% - 65rpx);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					margin-right: 10rpx;
					font-size: 24rpx;
					float: left;
					color: #303133;
				}
			}

			.items-content {
				width: 100%;
				float: left;
				color: #606266;
				font-size: 28rpx;
			}

			.items-time {
				width: 100%;
				float: left;
				text-align: right;
				color: #C0C4CC;
				font-size: 22rpx;
				margin-bottom: 26rpx;
				margin-top: 20rpx;
			}


		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
			}

			.right {
				/* display: flex; */
				/* flex-direction: column; */
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;
				width: 100%;

				text {
					width: 100%;
					display: inline-block;
				}

				.title {
					/* width: 54% !important; */
					font-weight: bold;
					font-size: 30rpx;
				}

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.b-t {
			display: flex;
			height: 70rpx;
			line-height: 70rpx;
			position: relative;
			margin-top: 50rpx;

			text {
				width: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: bold;
			}

			&::after {
				border: none !important;
			}

			.uni-numbox {
				left: 100rpx;
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}


	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 199;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
				position: absolute;
				width: calc(100% - 60rpx);
				bottom: 20rpx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}


	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			/* width: 96upx; */
			width: 112upx;
			height: 80upx;
			position: relative;

			uni-badge {
				position: absolute;
				right: 0;
				top: -8rpx;
			}

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				width: 196upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	uni-load-more {
		width: 100%;
		float: left;
	}
</style>
